<template>
  <div>
    <el-card>
      <el-form inline :disabled="disabled">
        <el-form-item label="一级分类">
          <el-select v-model="category1Id" @change="getCategory2SelectorList">
            <el-option
              v-for="cat1 in category1"
              :key="cat1.id"
              :label="cat1.name"
              :value="cat1.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="category2Id" @change="getCategory3SelectorList">
            <el-option
              v-for="cate2 in category2"
              :key="cate2.id"
              :label="cate2.name"
              :value="cate2.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select v-model="category3Id">
            <el-option
              v-for="cate3 in category3"
              :key="cate3.id"
              :label="cate3.name"
              :value="cate3.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "CategorySelector",
});
</script>
<script lang="ts" setup>
import { onMounted } from "vue";

import useCategorySelector from "@/hooks/categorySelector";
/**
 * 设置props的默认值 withDefaults
 * 第一个参数：defineProps
 * 第二个参数：props默认值对象，如果其中一个默认值不是简单值，那么一定需要通过函数来定义
 */
withDefaults(
  defineProps<{
    disabled?: boolean;
    obj?: Record<string, any>;
  }>(),
  {
    disabled: false,
    obj() {
      return { x: 1 };
    },
  }
);
const {
  category1,
  category2,
  category3,
  category1Id,
  category2Id,
  category3Id,
  getCategory1SelectorList,
  getCategory2SelectorList,
  getCategory3SelectorList,
} = useCategorySelector();

onMounted(() => {
  //初始化请求一级列表
  getCategory1SelectorList();
});
</script>

<style lang="less" scoped></style>
